import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Breadcrumb, Dropdown, Switch, type MenuProps } from 'antd'
import styles from './index.module.scss'
import userStore from '@/store'
import useStore from '@/store'
import { useNavigate } from 'react-router-dom'

const NavHeader = () => {
  const user = userStore(state => state.user)
  const { collapsed, updateCollapsed } = useStore()
  const navigate = useNavigate()
  const handleCollapsed = () => {
    updateCollapsed()
  }
  const items = [
    {
      title: '首页'
    },
    {
      title: '个人中心'
    }
  ]
  const dropItems: MenuProps['items'] = [
    {
      key: '1',
      label: '邮箱:' + user.userEmail
    },
    {
      key: '2',
      label: '退出'
    }
  ]
  const handleClick = e => {
    if (e.key === '2') {
      navigate('/login')
    }
  }
  return (
    <div className={styles.navHeader}>
      <div className={styles.left}>
        {collapsed ? (
          <MenuFoldOutlined onClick={handleCollapsed} className={styles.collapsed} />
        ) : (
          <MenuUnfoldOutlined onClick={handleCollapsed} className={styles.collapsed} />
        )}
        <Breadcrumb items={items} />
      </div>
      <div>
        <Switch style={{ marginRight: 10 }} checkedChildren='开启' unCheckedChildren='关闭' />
        <Dropdown menu={{ items: dropItems, onClick: handleClick }} placement='top'>
          <span>{user.userName}</span>
        </Dropdown>
      </div>
    </div>
  )
}

export default NavHeader
